<template>
  <div>
    <el-form :inline="true" ref="searchForm" :model="searchForm" label-width="96px">
      <el-form-item label="联系人" prop="name">
        <el-input v-model="searchForm.name" placeholder="请输入联系人..." @input.native="debounceSeach"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="searchForm.phone" placeholder="请输入手机号..." @input.native="debounceSeach"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearchForm('searchForm')">重置</el-button>
        <el-button @click="exportExcels(searchForm,`up_supplier/phone_export/${contactsData.id}`,'上游供应商')">导出</el-button>
      </el-form-item>
    </el-form>
    <el-card class="box-card">

      <div class="text item">
        <div id="tableBox" style="margin:0 25px;">
          <el-table :data="tableData.data" border append>
            <el-table-column label="上游名称" fixed>
              <template scope="scope">
                <span>{{ scope.row.fkName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="联系人">
              <template scope="scope">
                <span>{{ scope.row.name}}</span>
              </template>
            </el-table-column>
            <el-table-column label="联系人手机号">
              <template scope="scope">
                <span>{{ scope.row.phone}}</span>
              </template>
            </el-table-column>
            <el-table-column label="备注">
              <template scope="scope">
                <span>{{scope.row.remark }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right">
              <template scope="scope">
                <el-button size="mini" @click="addPersons(true,'edit',scope.row.id)" type="success">编辑</el-button>
              </template>

            </el-table-column>
          </el-table>

        </div>
      </div>
    </el-card>

    <div class="block" style="text-align: center;margin-top: 15px;position:relative;">
      <el-button style="position: absolute;right: 25px;top: 0px;" type="primary" @click="addPersons(true,'add')" size="small">添加联系人</el-button>
      <pagination v-on:refreshSeachData="seachData()" :tableData="tableData" :searchForm="searchForm"></pagination>
    </div>
    
  </div>

</template>

<script>
  import agentHttp from '@/utils/agentHttp.js'
  import {
    timestampToTime,
    formatTimer,
    debounce
  } from '@/utils/index.js'
  import pagination from '@/views/pagination' //分页组件
  import exportExcel from '@/utils/exportExcel' //导出
  export default {
    data() {
      return {
        code: '默认',
        tableData: [],
        //搜索字段
        searchForm: {
          name: "", //经销商
          phone: "", //申请时间
        },
      };
    },
    methods: {
      seachData(searchForm) { //初始化数据
       var params = this.searchForm || {};
        params.page = this.tableData.page || 1;
        params.rows = this.tableData.rows || 10;
        agentHttp.postJson(`adminApi/admin/up_supplier/phone_list/${this.contactsData.id}?page=${params.page}&rows=${params.rows}`,this.searchForm).then((res) => {
          if (res.success) {
            this.tableData =res.data.tableData;
          }
        })
      },
      debounceSeach() { //input框内容发生改变时，调接口显示查询结果
        this.tableData.page = 1;
        debounce(this.seachData(this.searchForm), 1000)
      },
      getDate(time) {
        return timestampToTime(time)
      },
      addPersons(code, msg, id) {
        this.contactsData.isCode = false;
        this.contactsManageData.isCode = true ;       //添加联系人  ，  联系人编辑页面打开；
        this.contactsManageData.isMsg = msg ; 
        id?this.contactsManageData.id = id:null       //联系人编辑组件，添加时需要用到上游 id
      },
      exportExcels(searchForm,url,name){
      exportExcel(searchForm,url,name)
    },
    resetSearchForm(formName) {
      this.tableData.page=1;
      this.tableData.rows=10;
      this.$refs[formName].resetFields();
      this.$nextTick(_ =>{
        this.seachData();
      })
    },
    },
    props: {
      contactsData: {
        type: Object
      },
      contactsManageData:{
        type:Object
      }
    },
    mounted() {
        this.seachData()

    },
    components: {
      pagination
    }
  };
</script>

<style lang="scss" scoped>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both;
  }

  .box-card {
    margin-top: 20px;
  }

  .align {
    margin: 50px auto 0;
    text-align: center;
  }
</style>
